<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #video{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <audio muted controls autoplay src="D:/funny/Music/周杰伦/八度空间/MP3/周杰伦 - 暗号.mp3"></audio>
    </div>
    <div>
        <video id="video" autoplay controls src="D:/funny/电影/BBC.逻辑趣味The.Joy.of.Logic.2013\BBC.The.Joy.of.Logic.720p.HDTV.x264.AAC.mkv"></video>
        <div>
            <input id="playBtn" type="button" value="播放">
            <input id="pauseBtn" type="button" value="暂停">
            <input id="addVoiceBtn" type="button" value="声音+">
            <input id="getInfoBtn" type="button" value="获取播放信息">
            <input id="setPlayRateBtn" type="button" value="调整播放速率">
            <select id="rateList">
                <option value="0.5">0.5倍</option>
                <option value="1" selected>正常</option>
                <option value="1.5">1.5倍</option>
                <option value="2">2倍</option>
            </select>
            <div id="showTime">

            </div>
        </div>
        
    </div>
    <script>
        let video = document.getElementById("video");
        let rateList = document.getElementById("rateList");
        let showTime = document.getElementById("showTime");
        document.getElementById("playBtn").onclick = function(){
            if(this.value == "播放"){
                video.play();
                this.value = "暂停";
            }else{
                video.pause();
                this.value = "播放";
            }
            
        };
        document.getElementById("pauseBtn").onclick = function(){
            video.pause();
        };
        document.getElementById("addVoiceBtn").onclick = function(){
            console.log(video.volume);
            video.volume += 0.1;
        };
        document.getElementById("getInfoBtn").onclick = function(){
            console.log("video.currentTime:",video.currentTime);
            console.log("video.duration:",video.duration);
        };
        document.getElementById("setPlayRateBtn").onclick = function(){
            console.log("video.playbackRate:",video.playbackRate);
            video.playbackRate += 0.5;
            
        };
        rateList.onchange = function(){
            video.playbackRate = this.value;
        }
        video.onplay = function(){
            console.log("正在播放");
        }
        video.ontimeupdate = function(){
            // console.log("video.currentTime:",video.currentTime);
            // console.log("video.duration:",video.duration);
            showTime.innerHTML = getTime(video.currentTime) + "/" + getTime(video.duration);
        }
        function getTime(time){
            let hour = parseInt(time / 3600).toString().padStart(2,"0");
            let min = parseInt(time % 3600 / 60).toString().padStart(2,"0");;
            let sec = parseInt(time % 3600 % 60).toString().padStart(2,"0");;
            return `${hour}:${min}:${sec}`;
        }
        
    </script>
</body>
</html>